<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item v-for="(item,index) in breadcrumbData" :key="index" :to="{ path: item.to }">
				<span class="breadcrumbSpan" @click="breadcrumbClick(item)">{{item.name}}</span>
			</el-breadcrumb-item>
		</el-breadcrumb>

		<div v-if="Nav.Node.level!=0">
			<Api v-if="Nav.Node.data.type=='file'" :Nav="Nav" :key="Nav.Node.data.id" :power="power"></Api>
			<Paths v-else-if="Nav.Node.data.type=='path'" :Nav="Nav" :key="Nav.Node.data.id" :power="power"></Paths>
		</div>
		<div v-else>
			<Paths :Nav="Nav" :key="Nav.Node.id" :power="power"></Paths>
		</div>
	</div>
</template>

<script>
	import Api from './apiMoudle.vue'
	import Paths from './pathMoudle.vue'
	export default {
		name: 'Info',
		props: {
			power: {
				type: Boolean
			},
			Nav: {
				type: Object
			}
		},
		components: {
			Api,
			Paths
		},
		data() {
			return {
				breadcrumbData: [{
					name: '根目录',
					to: '/',
					Node: this.Nav.Node,
				}]
			}
		},
		methods: {
			RefreshData() {
				// 刷新面包屑数据
				let Node = this.Nav.Node
				for (let i = Node.level; i > 0; i--) {
					let data = Node.data
					this.breadcrumbData.splice(1, 0, {
						name: data.label,
						to: data.label,
						Node: Node
					})
					Node = Node.parent
				}
			},
			breadcrumbClick(item) {
				this.Nav.Node = item.Node
				if (item.name === '根目录') {
					this.Nav.tree.setCurrentKey(null)
				} else {
					this.Nav.tree.setCurrentKey(this.Nav.Node.id)
				}
			}
		},
		watch: {
			'Nav.Node': {
				handler: function(val) {
					this.breadcrumbData = this.breadcrumbData.slice(0, 1)
					if (val) {
						this.RefreshData()
					}
				},
			},
		},
		created() {

		}
	}
</script>

<style scoped>
	.breadcrumbSpan {
		font-size: 18px;
	}
</style>
